<template>
  <div class="mooc-notes-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <div class="header-content">
          <div class="header-info">
            <h1 class="page-title">我的笔记</h1>
            <p class="page-subtitle">记录学习过程中的重要知识点和思考</p>
          </div>
          <div class="header-actions">
            <button class="new-note-btn" @click="createNote">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
              </svg>
              新建笔记
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="controls-section">
      <div class="container">
        <div class="search-controls">
          <!-- 搜索框 -->
          <div class="search-bar">
            <div class="search-input-wrapper">
              <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.35-4.35"></path>
              </svg>
              <input 
                type="text" 
                placeholder="搜索笔记标题或内容..." 
                class="search-input"
                v-model="searchKeyword"
                @input="handleSearch"
              >
            </div>
          </div>

          <!-- 筛选器 -->
          <div class="filters">
            <div class="filter-group">
              <label class="filter-label">类型</label>
              <select class="filter-select" v-model="selectedType" @change="loadNotes">
                <option value="">全部类型</option>
                <option value="GENERAL">普通笔记</option>
                <option value="VIDEO_TIMESTAMP">视频笔记</option>
                <option value="CHAPTER_SUMMARY">章节总结</option>
                <option value="QUESTION">问题笔记</option>
              </select>
            </div>

            <div class="filter-group">
              <label class="filter-label">排序</label>
              <select class="filter-select" v-model="sortBy" @change="loadNotes">
                <option value="created">创建时间</option>
                <option value="updated">更新时间</option>
                <option value="title">标题</option>
              </select>
            </div>

            <!-- 视图切换 -->
            <div class="view-toggle">
              <button 
                class="view-btn"
                :class="{ active: viewMode === 'list' }"
                @click="viewMode = 'list'"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <line x1="8" y1="6" x2="21" y2="6"></line>
                  <line x1="8" y1="12" x2="21" y2="12"></line>
                  <line x1="8" y1="18" x2="21" y2="18"></line>
                  <line x1="3" y1="6" x2="3.01" y2="6"></line>
                  <line x1="3" y1="12" x2="3.01" y2="12"></line>
                  <line x1="3" y1="18" x2="3.01" y2="18"></line>
                </svg>
              </button>
              <button 
                class="view-btn"
                :class="{ active: viewMode === 'grid' }"
                @click="viewMode = 'grid'"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <rect x="3" y="3" width="7" height="7"></rect>
                  <rect x="14" y="3" width="7" height="7"></rect>
                  <rect x="14" y="14" width="7" height="7"></rect>
                  <rect x="3" y="14" width="7" height="7"></rect>
                </svg>
              </button>
            </div>
          </div>
        </div>

        <!-- 标签筛选 -->
        <div v-if="selectedTags.length > 0 || availableTags.length > 0" class="tags-section">
          <div class="selected-tags">
            <span v-for="tag in selectedTags" :key="tag" class="tag-item">
              {{ tag }}
              <button class="tag-remove" @click="removeTag(tag)">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </button>
            </span>
          </div>
          
          <div v-if="selectedTags.length < 5" class="add-tag">
            <select class="tag-select" v-model="tempTag" @change="addTag">
              <option value="">选择标签</option>
              <option v-for="tag in availableTags" :key="tag" :value="tag">{{ tag }}</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- 笔记内容 -->
    <div class="notes-content">
      <div class="container">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-state">
          <div class="loading-spinner">
            <svg class="spinner" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
            </svg>
          </div>
          <p class="loading-text">正在加载笔记...</p>
        </div>

        <!-- 空状态 -->
        <div v-else-if="notes.length === 0" class="empty-state">
          <div class="empty-icon">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
            </svg>
          </div>
          <h3 class="empty-title">还没有笔记</h3>
          <p class="empty-subtitle">开始记录您的学习心得和重要知识点</p>
          <button class="primary-btn" @click="createNote">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            创建笔记
          </button>
        </div>

        <!-- 列表视图 -->
        <div v-else-if="viewMode === 'list'" class="notes-list">
          <div 
            v-for="note in notes" 
            :key="note.id"
            class="note-item"
            @click="viewNote(note)"
          >
            <div class="note-header">
              <div class="note-meta">
                <span class="note-type" :class="getNoteTypeClass(note.noteType)">
                  {{ getNoteTypeLabel(note.noteType) }}
                </span>
                <span v-if="note.courseTitle" class="course-name">{{ note.courseTitle }}</span>
                <span v-if="note.lessonTitle" class="lesson-name">{{ note.lessonTitle }}</span>
                <span v-if="note.formattedTimestamp" class="timestamp">{{ note.formattedTimestamp }}</span>
              </div>
              <div class="note-actions">
                <button class="action-btn" @click.stop="editNote(note)" title="编辑">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                  </svg>
                </button>
                <button class="action-btn delete" @click.stop="deleteNote(note)" title="删除">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <polyline points="3,6 5,6 21,6"></polyline>
                    <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                  </svg>
                </button>
              </div>
            </div>
            
            <h3 class="note-title">{{ note.title }}</h3>
            
            <div class="note-preview">
              {{ getContentPreview(note.content) }}
            </div>
            
            <div class="note-footer">
              <div class="note-tags">
                <span v-for="tag in note.tags?.slice(0, 3)" :key="tag" class="tag">
                  {{ tag }}
                </span>
                <span v-if="note.tags && note.tags.length > 3" class="more-tags">
                  +{{ note.tags.length - 3 }}
                </span>
              </div>
              <div class="note-time">{{ formatTime(note.updatedAt) }}</div>
            </div>
          </div>
        </div>

        <!-- 网格视图 -->
        <div v-else class="notes-grid">
          <div 
            v-for="note in notes" 
            :key="note.id"
            class="note-card"
            @click="viewNote(note)"
          >
            <div class="card-header">
              <span class="note-type" :class="getNoteTypeClass(note.noteType)">
                {{ getNoteTypeLabel(note.noteType) }}
              </span>
              <div class="card-actions">
                <button class="action-btn" @click.stop="showNoteMenu(note, $event)">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="12" cy="12" r="1"></circle>
                    <circle cx="19" cy="12" r="1"></circle>
                    <circle cx="5" cy="12" r="1"></circle>
                  </svg>
                </button>
              </div>
            </div>
            
            <h4 class="card-title">{{ note.title }}</h4>
            
            <div class="card-meta">
              <span v-if="note.courseTitle" class="course-name">{{ note.courseTitle }}</span>
              <span v-if="note.lessonTitle" class="lesson-name">{{ note.lessonTitle }}</span>
            </div>
            
            <p class="card-preview">{{ getContentPreview(note.content) }}</p>
            
            <div class="card-footer">
              <div class="card-tags">
                <span v-for="tag in note.tags?.slice(0, 2)" :key="tag" class="tag">
                  {{ tag }}
                </span>
              </div>
              <div class="card-time">{{ formatTime(note.updatedAt) }}</div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div v-if="total > pageSize" class="pagination-wrapper">
          <div class="pagination">
            <button 
              class="page-btn"
              :disabled="currentPage <= 1"
              @click="changePage(currentPage - 1)"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <polyline points="15,18 9,12 15,6"></polyline>
              </svg>
              上一页
            </button>
            
            <div class="page-numbers">
              <button 
                v-for="page in visiblePages" 
                :key="page"
                class="page-number"
                :class="{ active: page === currentPage }"
                @click="changePage(page)"
              >
                {{ page }}
              </button>
            </div>
            
            <button 
              class="page-btn"
              :disabled="currentPage >= totalPages"
              @click="changePage(currentPage + 1)"
            >
              下一页
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <polyline points="9,18 15,12 9,6"></polyline>
              </svg>
            </button>
          </div>
          
          <div class="pagination-info">
            共 {{ total }} 条笔记，第 {{ currentPage }} / {{ totalPages }} 页
          </div>
        </div>
      </div>
    </div>

    <!-- 笔记编辑器弹窗 -->
    <div v-if="showEditor" class="modal-overlay" @click="closeEditor">
      <div class="modal-content large" @click.stop>
        <div class="modal-header">
          <h3 class="modal-title">{{ editingNote ? '编辑笔记' : '新建笔记' }}</h3>
          <button class="modal-close" @click="closeEditor">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <!-- 这里应该是笔记编辑器组件，暂时用简单表单代替 -->
          <div class="editor-form">
            <div class="form-group">
              <label class="form-label">标题</label>
              <input type="text" class="form-input" v-model="noteForm.title" placeholder="请输入笔记标题">
            </div>
            <div class="form-group">
              <label class="form-label">类型</label>
              <select class="form-select" v-model="noteForm.noteType">
                <option value="GENERAL">普通笔记</option>
                <option value="VIDEO_TIMESTAMP">视频笔记</option>
                <option value="CHAPTER_SUMMARY">章节总结</option>
                <option value="QUESTION">问题笔记</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">内容</label>
              <textarea class="form-textarea" v-model="noteForm.content" placeholder="记录您的学习心得..." rows="10"></textarea>
            </div>
            <div class="form-group">
              <label class="form-label">标签</label>
              <input type="text" class="form-input" v-model="noteForm.tagsInput" placeholder="用逗号分隔多个标签">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="secondary-btn" @click="closeEditor">取消</button>
          <button class="primary-btn" @click="saveNote">{{ editingNote ? '更新' : '创建' }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { notesApi, type Note } from '@/api/notes'

const router = useRouter()

// 状态
const loading = ref(false)
const notes = ref<Note[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const searchKeyword = ref('')
const selectedType = ref('')
const sortBy = ref('created')
const selectedTags = ref<string[]>([])
const tempTag = ref('')
const availableTags = ref<string[]>([])
const viewMode = ref<'list' | 'grid'>('list')
const showEditor = ref(false)
const editingNote = ref<Note | null>(null)

// 表单数据
const noteForm = reactive({
  title: '',
  content: '',
  noteType: 'GENERAL',
  tagsInput: ''
})

// 计算属性
const isSearching = computed(() => !!searchKeyword.value.trim())
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
const visiblePages = computed(() => {
  const current = currentPage.value
  const total = totalPages.value
  const delta = 2
  
  let start = Math.max(1, current - delta)
  let end = Math.min(total, current + delta)
  
  if (end - start < delta * 2) {
    if (start === 1) {
      end = Math.min(total, start + delta * 2)
    } else {
      start = Math.max(1, end - delta * 2)
    }
  }
  
  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
})

// 方法
const loadNotes = async () => {
  loading.value = true
  try {
    let result
    if (isSearching.value) {
      result = await notesApi.searchNotes(searchKeyword.value, currentPage.value - 1, pageSize.value)
    } else {
      result = await notesApi.getMyNotes(currentPage.value - 1, pageSize.value, sortBy.value)
    }
    
    notes.value = result.content || []
    total.value = result.totalElements || 0
  } catch (error: any) {
    console.error('加载笔记失败:', error)
    ElMessage.error('加载笔记失败')
  } finally {
    loading.value = false
  }
}

const loadPopularTags = async () => {
  try {
    availableTags.value = await notesApi.getPopularTags(20)
  } catch (error) {
    console.error('加载标签失败:', error)
  }
}

const handleSearch = () => {
  currentPage.value = 1
  loadNotes()
}

const addTag = () => {
  if (tempTag.value && !selectedTags.value.includes(tempTag.value)) {
    selectedTags.value.push(tempTag.value)
    tempTag.value = ''
    // TODO: 根据标签筛选笔记
  }
}

const removeTag = (tag: string) => {
  const index = selectedTags.value.indexOf(tag)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
    // TODO: 根据标签筛选笔记
  }
}

const changePage = (page: number) => {
  currentPage.value = page
  loadNotes()
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const createNote = () => {
  editingNote.value = null
  Object.assign(noteForm, {
    title: '',
    content: '',
    noteType: 'GENERAL',
    tagsInput: ''
  })
  showEditor.value = true
}

const editNote = (note: Note) => {
  editingNote.value = note
  Object.assign(noteForm, {
    title: note.title,
    content: note.content,
    noteType: note.noteType,
    tagsInput: note.tags?.join(', ') || ''
  })
  showEditor.value = true
}

const viewNote = (note: Note) => {
  // TODO: 跳转到笔记详情页或打开笔记详情弹窗
  console.log('查看笔记:', note)
}

const deleteNote = async (note: Note) => {
  try {
    await ElMessageBox.confirm(`确定要删除笔记"${note.title}"吗？`, '确认删除', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await notesApi.deleteNote(note.id)
    ElMessage.success('笔记删除成功')
    loadNotes()
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

const showNoteMenu = (note: Note, event: Event) => {
  // TODO: 显示右键菜单
  console.log('显示笔记菜单:', note)
}

const closeEditor = () => {
  showEditor.value = false
  editingNote.value = null
}

const saveNote = async () => {
  if (!noteForm.title.trim() || !noteForm.content.trim()) {
    ElMessage.error('请填写标题和内容')
    return
  }

  try {
    const noteData = {
      title: noteForm.title,
      content: noteForm.content,
      noteType: noteForm.noteType,
      tags: noteForm.tagsInput ? noteForm.tagsInput.split(',').map(tag => tag.trim()).filter(Boolean) : []
    }

    if (editingNote.value) {
      await notesApi.updateNote(editingNote.value.id, noteData)
      ElMessage.success('笔记更新成功')
    } else {
      await notesApi.createNote({ ...noteData, courseId: 1 }) // 默认课程ID
      ElMessage.success('笔记创建成功')
    }

    showEditor.value = false
    loadNotes()
  } catch (error: any) {
    ElMessage.error(editingNote.value ? '更新失败' : '创建失败')
  }
}

const getNoteTypeLabel = (type: string) => {
  const labels: Record<string, string> = {
    'GENERAL': '普通笔记',
    'VIDEO_TIMESTAMP': '视频笔记',
    'CHAPTER_SUMMARY': '章节总结',
    'QUESTION': '问题笔记'
  }
  return labels[type] || type
}

const getNoteTypeClass = (type: string) => {
  const classes: Record<string, string> = {
    'GENERAL': 'type-general',
    'VIDEO_TIMESTAMP': 'type-video',
    'CHAPTER_SUMMARY': 'type-summary',
    'QUESTION': 'type-question'
  }
  return classes[type] || 'type-general'
}

const getContentPreview = (content: string) => {
  return content.replace(/[#*`\[\]]/g, '').substring(0, 120) + (content.length > 120 ? '...' : '')
}

const formatTime = (time: string) => {
  const date = new Date(time)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)
  
  if (days > 0) {
    return `${days}天前`
  } else if (hours > 0) {
    return `${hours}小时前`
  } else if (minutes > 0) {
    return `${minutes}分钟前`
  } else {
    return '刚刚'
  }
}

// 生命周期
onMounted(() => {
  loadNotes()
  loadPopularTags()
})
</script>

<style scoped>
/* My MOOC风格的笔记页面 */
.mooc-notes-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 页面头部 */
.page-header {
  background: white;
  border-bottom: 1px solid #e5e5e5;
  padding: 30px 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-info {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 400;
  color: #333;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.new-note-btn {
  background: #4A90E2;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
}

.new-note-btn:hover {
  background: #357ABD;
}

/* 控制区域 */
.controls-section {
  background: white;
  border-bottom: 1px solid #e5e5e5;
  padding: 20px 0;
}

.search-controls {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
}

.search-bar {
  flex: 1;
  max-width: 400px;
}

.search-input-wrapper {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.search-input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: #f8f9fa;
  transition: all 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #4A90E2;
  background: white;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.filters {
  display: flex;
  gap: 16px;
  align-items: center;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.filter-select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  background: white;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: #4A90E2;
}

.view-toggle {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.view-btn {
  background: white;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: #666;
}

.view-btn:hover {
  background: #f8f9fa;
}

.view-btn.active {
  background: #4A90E2;
  color: white;
}

.view-btn + .view-btn {
  border-left: 1px solid #ddd;
}

/* 标签区域 */
.tags-section {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.selected-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag-item {
  background: #4A90E2;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tag-remove {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  background: white;
  cursor: pointer;
}

/* 笔记内容 */
.notes-content {
  padding: 30px 0;
}

/* 加载和空状态 */
.loading-state,
.empty-state {
  text-align: center;
  padding: 80px 20px;
}

.loading-spinner {
  margin-bottom: 20px;
}

.spinner {
  color: #4A90E2;
  animation: spin 1s linear infinite;
}

.loading-text {
  color: #666;
  font-size: 16px;
}

.empty-icon {
  color: #999;
  margin-bottom: 20px;
}

.empty-title {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.empty-subtitle {
  color: #666;
  margin-bottom: 30px;
}

.primary-btn {
  background: #4A90E2;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
}

.primary-btn:hover {
  background: #357ABD;
}

/* 列表视图 */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.note-item {
  background: white;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  transition: all 0.3s;
}

.note-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.note-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.note-type {
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
}

.note-type.type-general {
  background: #f0f0f0;
  color: #666;
}

.note-type.type-video {
  background: #e8f5e8;
  color: #52c41a;
}

.note-type.type-summary {
  background: #fff7e6;
  color: #fa8c16;
}

.note-type.type-question {
  background: #fff1f0;
  color: #ff4d4f;
}

.course-name {
  color: #4A90E2;
  font-weight: 500;
}

.lesson-name {
  color: #666;
}

.timestamp {
  color: #999;
}

.note-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background: #f8f9fa;
  color: #4A90E2;
}

.action-btn.delete:hover {
  color: #ff4d4f;
}

.note-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.4;
}

.note-preview {
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.note-tags {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tag {
  background: #f8f9fa;
  color: #666;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
}

.more-tags {
  font-size: 12px;
  color: #999;
}

.note-time {
  font-size: 12px;
  color: #999;
}

/* 网格视图 */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.note-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  transition: all 0.3s;
  height: 280px;
  display: flex;
  flex-direction: column;
}

.note-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card-actions {
  display: flex;
  gap: 4px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
}

.card-preview {
  flex: 1;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-tags {
  display: flex;
  gap: 4px;
}

.card-time {
  font-size: 12px;
  color: #999;
}

/* 分页 */
.pagination-wrapper {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-btn {
  background: white;
  border: 1px solid #ddd;
  color: #333;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
  border-color: #4A90E2;
  color: #4A90E2;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-number {
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.page-number:hover {
  border-color: #4A90E2;
  color: #4A90E2;
}

.page-number.active {
  background: #4A90E2;
  border-color: #4A90E2;
  color: white;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  margin: 20px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content.large {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.modal-close:hover {
  background: #f8f9fa;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 表单样式 */
.editor-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #4A90E2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 200px;
  font-family: inherit;
}

.secondary-btn {
  background: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.secondary-btn:hover {
  background: #e9ecef;
}

/* 动画 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .search-controls {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .search-bar {
    max-width: none;
  }

  .filters {
    flex-wrap: wrap;
    gap: 12px;
  }

  .notes-grid {
    grid-template-columns: 1fr;
  }

  .tags-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 24px;
  }

  .note-card {
    height: auto;
    min-height: 240px;
  }

  .modal-content {
    margin: 10px;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>